<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎界面</title>
		<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
		<link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
		<link rel="stylesheet" href="../css/public.css" media="all">
		<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
		<style>
			.lunboImg{width: 100%;height: 100%;}
			.layui-card {border:1px solid #f2f2f2;border-radius:5px;}
			.icon {margin-right:10px;color:#1aa094;}
			.icon-cray {color:#ffb800!important;}
			.icon-blue {color:#1e9fff!important;}
			.icon-tip {color:#ff5722!important;}
			.layuimini-qiuck-module {text-align:center;margin-top: 10px}
			.layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
			.layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
			.welcome-module {width:100%;height:210px;}
			.panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
			.panel-body {padding:10px}
			.panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
			.label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
			.layui-red {color:red}
			.main_btn > p {height:40px;}
			.layui-bg-number {background-color:#F8F8F8;}
			.layuimini-notice:hover {background:#f6f6f6;}
			.layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
			.layuimini-notice-title,.layuimini-notice-label {
				padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
			.layuimini-notice-title {line-height:28px;font-size:14px;}
			.layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
		</style>
	</head>
	<body>
		<div class="layuimini-main">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md8">
					<div class="layui-card">
						<div class="layui-card-header">
							<i class="fa fa-line-chart icon"></i>推荐文章
							<span style="margin-right: 0px"><a href="">最近文章</a></span>
						</div>
						<div class="layui-card-body">
							<div id="content" style="width: 100%;min-height:500px">
								<!--轮播图-->
								<div class="layui-carousel" id="ID-carousel-demo-image" lay-filter="carofilter">
									<div carousel-item>
										<div><img src="/img/yao.jpg" class="lunboImg"></div>
										<div><img src="/img/miao.jpg" class="lunboImg"></div>
										<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-3.jpg" class="lunboImg"></div>
										<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-4.jpg" class="lunboImg"></div>
										<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-5.jpg" class="lunboImg"></div>
									</div>
								</div>
								<br>
								<!--展示的文章内容-->
								<div class="layui-card">
									<h1 id="artTitle" style="text-align: center; margin-top:20px"></h1>
									<br>
									<h3 id="artAuthor" style="text-align: center" ></h3>
									<div id="showContent"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md4">
					<div class="layui-card">
						<div class="layui-card-header"><i class="fa fa-fire icon"></i>用户信息</div>
						<div class="layui-card-body layui-text">
							<table class="layui-table">
								<colgroup>
									<col width="100">
									<col>
								</colgroup>
								<tbody>
								<tr>
									<td>用户名称</td>
									<td>
										<span id="username"></span>
									</td>
								</tr>
								<tr>
									<td>手机号码</td>
									<td><span id="phone"></span></td>
								</tr>
								<tr>
									<td>邮箱</td>
									<td><span id="email"></span></td>
								</tr>
								<tr>
									<td>用户编号</td>
									<td>
										<span id="userid"></span>
									</td>
								</tr>
								<tr>
									<td>发表文章</td>
									<td>
										<ol id="art">

										</ol>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="layui-card">
						<div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>系统公告</div>
						<div class="layui-card-body layui-text" id="noticeContent">
							<div class="layuimini-notice">
								<div class="layuimini-notice-title">新增treetable插件和菜单管理样式</div>
								<div class="layuimini-notice-extra">2019-07-05 14:28</div>
								<div class="layuimini-notice-content layui-hide">
									界面足够简洁清爽。<br>
									一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
									支持多tab，可以打开多窗口。<br>
									支持无限级菜单和对font-awesome图标库的完美支持。<br>
									失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
									url地址hash定位，可以清楚看到当前tab的地址信息。<br>
									刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
									移动端的友好支持。<br>
								</div>
							</div>
							<div class="layuimini-notice">
								<div class="layuimini-notice-title">修改logo缩放问题</div>
								<div class="layuimini-notice-extra">2019-07-04 11:02</div>
								<div class="layuimini-notice-content layui-hide">
									界面足够简洁清爽。<br>
									一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
									支持多tab，可以打开多窗口。<br>
									支持无限级菜单和对font-awesome图标库的完美支持。<br>
									失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
									url地址hash定位，可以清楚看到当前tab的地址信息。<br>
									刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
									移动端的友好支持。<br>
								</div>
							</div>
							<div class="layuimini-notice">
								<div class="layuimini-notice-title">修复左侧菜单缩放tab无法移动</div>
								<div class="layuimini-notice-extra">2019-06-17 11:55</div>
								<div class="layuimini-notice-content layui-hide">
									界面足够简洁清爽。<br>
									一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
									支持多tab，可以打开多窗口。<br>
									支持无限级菜单和对font-awesome图标库的完美支持。<br>
									失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
									url地址hash定位，可以清楚看到当前tab的地址信息。<br>
									刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
									移动端的友好支持。<br>
								</div>
							</div>
							<div class="layuimini-notice">
								<div class="layuimini-notice-title">修复多模块菜单栏展开有问题</div>
								<div class="layuimini-notice-extra">2019-06-13 14:53</div>
								<div class="layuimini-notice-content layui-hide">
									界面足够简洁清爽。<br>
									一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
									支持多tab，可以打开多窗口。<br>
									支持无限级菜单和对font-awesome图标库的完美支持。<br>
									失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
									url地址hash定位，可以清楚看到当前tab的地址信息。<br>
									刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
									移动端的友好支持。<br>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-card">
						<div class="layui-card-header"><i class="fa fa-credit-card icon icon-blue"></i>快捷入口</div>
						<div class="layui-card-body">
							<div class="welcome-module">
								<div class="layui-row layui-col-space10 layuimini-qiuck">
									<!--                    <div class="layui-col-xs3 layuimini-qiuck-module">-->
									<!--                      <a href="javascript:;" layuimini-content-href="page/form.html" data-title="表单示例" data-icon="fa fa-calendar">-->
									<!--                        <i class="fa fa-calendar"></i>-->
									<!--                        <cite>表单示例</cite>-->
									<!--                      </a>-->
									<!--                    </div>-->
									<!--                    <div class="layui-col-xs3 layuimini-qiuck-module">-->
									<!--                      <a href="javascript:;" layuimini-content-href="page/404.html" data-title="404页面" data-icon="fa fa-hourglass-end">-->
									<!--                        <i class="fa fa-hourglass-end"></i>-->
									<!--                        <cite>404页面</cite>-->
									<!--                      </a>-->
									<!--                    </div>-->
									<!--                    <div class="layui-col-xs3 layuimini-qiuck-module">-->
									<!--                      <a href="javascript:;" layuimini-content-href="page/button.html" data-title="按钮示例" data-icon="fa fa-snowflake-o">-->
									<!--                        <i class="fa fa-snowflake-o"></i>-->
									<!--                        <cite>按钮示例</cite>-->
									<!--                      </a>-->
									<!--                    </div>-->
									<div class="layui-col-xs3 layuimini-qiuck-module">
										<a href="javascript:;" layuimini-content-href="http://www.zhongyoo.com" data-title="中药搜索" data-icon="fa fa-search">
											<i class="fa fa-search"></i>
											<cite>中药搜索</cite>
										</a>
									</div>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
	<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
	<script>
		layui.use(['layer', 'miniTab','echarts','layedit','wangEditor','form'],function(){
			var $ = layui.jquery,
					layer = layui.layer,
					miniTab = layui.miniTab,
					echarts = layui.echarts,
					form=layui.form;
			var carousel = layui.carousel;
			var $=layui.$;
			// 渲染 - 图片轮播
			carousel.render({
				elem: '#ID-carousel-demo-image',
				 width: "100%",
				 height: '360px',
				interval: 3000
			});
			//**************************监听轮播切换事件
			carousel.on('change(carofilter)', function (obj) {

			});
			//推荐文章显示
			$.get(
					'/article/getArt',
					function (data){
						$("#artTitle").html('<strong>'+data.articletitle+'</strong>')
						$("#artAuthor").html(data.author)
						$("#showContent").html(data.body)
					},'json'

			);

			//获取用户数据进行展示。
			$.get(
					'/user/getuser',
					function(data){
						if(data!=null){
							var data=$.parseJSON(data);
							var articless = $.parseJSON(data.articles);
							console.log(data)
							$("#username").html(data.username)
							$("#phone").html(data.phone);
							$("#email").html(data.email);
							$("#userid").html(data.uid);
							var content='';
							for(let i=0;i<articless.length;i++){
								content=content+'<li>'+articless[i].articletitle+'</li>'
							}
							$("#art").html(content);//将内容动态展示到页面当中。
						}
					});
			/**
			 * 查看实时刷新数据。
			 **/
			let websocket=null;
			let host=document.location.host;//获取客户端主机编号。
			//判断当前浏览器是否支持websocket
			if(!!window.WebSocket && window.WebSocket.prototype.send){
				//连接webSocket节点
				websocket = new WebSocket("ws://"+host+"/websocket");
			}else{
				alert("浏览器不支持webSocket");
			}
			//连接发生错误的回调方法
			// websocket.onerror=function (){
			//   setMessageInnerHTML("error");
			// }
			//接收到消息的回调方法
			websocket.onmessage=function (event){
				let data=event.data;
				var Jsondata = $.parseJSON(data);//将字符串转换成json格式接收
				var JsonNotice=$.parseJSON(Jsondata.notice)
				console.log(JsonNotice)
				var noticeContent='';
				for(let i=0;i<JsonNotice.length;i++){
					noticeContent=noticeContent+'<div class="layuimini-notice">' +
							'<div class="layuimini-notice-title">'+JsonNotice[i].noticetitle+'</div>' +
							'<div class="layuimini-notice-extra">'+JsonNotice[i].noticetime+'</div>' +
							'<div class="layuimini-notice-content layui-hide">'+JsonNotice[i].noticecontent+'</div></div>'
				}

				$("#noticeContent").html(noticeContent);
			}

			//连接关闭的回调方法
			websocket.onclose = function () {
				console.log("websocket关闭连接")
			};

			//关闭连接
			function closeWebSocket() {
				websocket.close();
			};
			//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
			window.onbeforeunload = function () {
				websocket.close();
			};
			/**
			 * 查看公告信息
			 **/
			$('body').on('click', '.layuimini-notice', function () {
				var title = $(this).children('.layuimini-notice-title').text(),
						noticeTime = $(this).children('.layuimini-notice-extra').text(),
						content = $(this).children('.layuimini-notice-content').html();
				var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
						'<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
						'<div style="font-size: 12px">' + content + '</div>\n' +
						'</div>\n';
				parent.layer.open({
					type: 1,
					title: '系统公告'+'<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">'+noticeTime+'</span>',
					area: '300px;',
					shade: 0.8,
					id: 'layuimini-notice',
					btn: ['查看', '取消'],
					btnAlign: 'c',
					moveType: 1,
					content:html,
					success: function (layero) {
						var btn = layero.find('.layui-layer-btn');
						btn.find('.layui-layer-btn0').attr({
							href: 'https://gitee.com/zhongshaofa/layuimini',
							target: '_blank'
						});
					}
				});
			});

		});
	</script>
</html>
